<script setup lang="ts">
import { getCurrentInstance, onBeforeMount, reactive, ref } from 'vue'

const vm = getCurrentInstance()

interface BaseInfoTableProps {
  label: string
  key: string
  labelClass?: string
  contentClass?: string
  renderType:
    | 'text'
    | 'radio'
    | 'checkbox'
    | 'input'
    | 'select'
    | 'render'
    | 'date'
    | 'year'
    | 'month'
    | 'textarea'
  placeholder?: string
  disabled?: boolean
  calc?: boolean
  calcFields?: string[] | string
  control?: boolean
  options?: {
    label: string
    value: string
    disabled?: boolean
    input?: boolean
    otherKey?: string
  }[]
}

const formData = reactive<Record<string, any>>({})

const props = defineProps<{
  column: number
  baseInfoTableProps: BaseInfoTableProps[]
  border?: boolean
  direction?: 'horizontal' | 'vertical'
  disabled?: boolean
}>()

const getFilledFormData = () => {
  return formData
}

const inputData = (data: Record<string, any>) => {
  if (!data) return
  const hasKeys = []
  props.baseInfoTableProps.forEach((item) => {
    hasKeys.push(item.key)
    if (item.options) {
      item.options.forEach((option) => {
        if (option.input) {
          hasKeys.push(option.otherKey)
        }
      })
    }
  })
  Object.keys(data).forEach((key) => {
    if (hasKeys.includes(key)) {
      formData[key] = data[key] ?? ''
    }
  })
}

onBeforeMount(() => {
  // const finds = props.baseInfoTableProps.filter(
  //   (item) => item.renderType === 'checkbox'
  // )
  // finds.forEach((item) => {
  //   if (!formData[item.key]) {
  //     vm?.proxy.$set(formData, item.key, [])
  //     // formData.value[item.key] = []
  //   }
  // })
  props.baseInfoTableProps.forEach((item) => {
    if (!formData[item.key]) {
      if (item.renderType === 'checkbox') {
        vm?.proxy.$set(formData, item.key, [])
      } else {
        vm?.proxy.$set(formData, item.key, '')
      }
      if (item.options) {
        item.options.forEach((option) => {
          if (option.input) {
            if (!formData[option.otherKey]) {
              vm?.proxy.$set(formData, option.otherKey, '')
            }
          }
        })
      }
    }
  })
})

const emit = defineEmits(['calcNum', 'changeRadio', 'changeSelect'])

const handleCalcNum = () => {
  emit('calcNum', formData)
}

const handleChangeRadio = (item) => {
  emit('changeRadio', item.key, formData[item.key])
}

const handleSelectChange = (item) => {
  emit('changeSelect', item.key, formData[item.key])
}

defineExpose({
  inputData,
  getFilledFormData,
})

const handleCheckChange = (item) => {
  const value = formData[item.key]
  if (!value?.includes('10')) {
    const otherKey = item.options.find(
      (option) => option.value === '10'
    )?.otherKey
    if (formData[otherKey]) {
      formData[otherKey] = ''
    }
  }
}
</script>

<template>
  <el-descriptions :column="column" :border="border" :direction="direction">
    <el-descriptions-item
      v-for="item in baseInfoTableProps"
      :label="item.label"
      :key="item.key"
      :label-class-name="item.labelClass"
      :content-class-name="item.contentClass"
    >
      <el-input
        v-if="item.renderType === 'input'"
        v-model="formData[item.key]"
        :placeholder="item.placeholder"
        :disabled="disabled || item.disabled"
        @change="item.calc ? handleCalcNum() : () => {}"
      ></el-input>
      <el-input
        v-else-if="item.renderType === 'textarea'"
        v-model="formData[item.key]"
        :placeholder="item.placeholder"
        :disabled="disabled || item.disabled"
        type="textarea"
      ></el-input>
      <el-radio-group
        v-else-if="item.renderType === 'radio'"
        v-model="formData[item.key]"
        @change="item.control ? handleChangeRadio(item) : () => {}"
      >
        <el-radio
          v-for="option in item.options"
          :label="option.value"
          :key="option.value"
          :disabled="disabled || option.disabled"
          >{{ option.label }}</el-radio
        >
      </el-radio-group>
      <el-checkbox-group
        v-else-if="item.renderType === 'checkbox'"
        v-model="formData[item.key]"
        :disabled="disabled || item.disabled"
        @change="item.calc ? handleCheckChange(item) : () => {}"
      >
        <el-checkbox
          v-for="option in item.options"
          :label="option.value"
          :key="option.value"
          :disabled="disabled || option.disabled"
          >{{ option.label
          }}<el-input
            class="other-input"
            v-if="option.input"
            v-model="formData[option.otherKey]"
            placeholder="请输入"
            :disabled="disabled || item.disabled || option.disabled"
          ></el-input>
        </el-checkbox>
      </el-checkbox-group>
      <el-select
        v-else-if="item.renderType === 'select'"
        v-model="formData[item.key]"
        :placeholder="item.placeholder"
        @change="item.calc ? handleSelectChange(item) : () => {}"
        :disabled="disabled || item.disabled"
        clearable
      >
        <el-option
          v-for="option in item.options"
          :label="option.label"
          :value="option.value"
          :key="option.value"
          :disabled="disabled || option.disabled"
        ></el-option>
      </el-select>
      <el-date-picker
        v-else-if="item.renderType === 'date'"
        v-model="formData[item.key]"
        type="date"
        placeholder="选择日期"
        :disabled="disabled || item.disabled"
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.renderType === 'year'"
        v-model="formData[item.key]"
        type="year"
        placeholder="选择年"
        :disabled="disabled || item.disabled"
        value-format="yyyy"
        format="yyyy"
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.renderType === 'month'"
        v-model="formData[item.key]"
        type="month"
        placeholder="选择月"
        :disabled="disabled || item.disabled"
      ></el-date-picker>
      <div class="common-render" v-else-if="item.renderType === 'render'">
        <slot :name="item.key"></slot>
      </div>
      <div v-else-if="item.renderType === 'calc'">
        {{
          formData[item.key] ||
          (formData[item.calcFields[0]] || '') +
            '-' +
            (formData[item.calcFields[1]] || '')
        }}
      </div>
      <span v-else>{{ formData[item.key] }}</span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style scoped lang="scss">
:deep(.el-descriptions-row) {
  .other-input {
    margin-left: 12px;
  }

  .required-label {
    &::after {
      margin-left: 4px;
      content: '*';
      color: red;
    }
  }

  .text-red {
    color: red;
  }
}
</style>
